<link rel="stylesheet" href="/static/ztree/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="/static/ztree/jquery.ztree.all.min.js"></script>
<style type="text/css">
	.role-table-min-height{
		min-height: 400px;
	}
</style>

<div class="panel panel-default">
	<div class="panel-heading">
		<form action="" method="GET" class="form-inline" >
			<div class="form-group">
				<label>名称:</label>
				<input type="text" name="role_name" class="form-control" placeholder="">
			</div>
			<button type="submit" class="btn btn-default btn-sm">查找</button>
			<button type="button" class="btn btn-primary  btn-sm" onclick="addRoleModal();">添加</button>
		</form>
	</div>
	<div class="panel-body role-table-min-height">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="40">序号</th>
					<th width="100">名称</th>
					<th width="150">备注</th>
					<th width="40">排序</th>
					<th width="80">状态</th>
					<th width="150">操作</th>
				</tr>
			</thead>
			<tbody>
			<!-- {$data|print_r} -->
			{volist   name="data" id="vo" key="k" } 
				<tr>
					<td>{$k+($p-1)*$size}</td>
					<td>{$vo.role_name}</td>
					<td>{$vo.remark}</td>
					<td>{$vo.sort}</td>
					<td>
						{if $vo.status_id==1}
						正常
						{else /}停用
						{/if}
					</td>
					<td>
						<button type="button" class="btn btn-primary btn-sm" onclick="editRoleModel({$vo|json_encode})">修改</button>
						<button type="button" class="btn btn-danger btn-sm" onclick="delRol({$vo.id});">删除</button>
						<button type="button" class="btn btn-default btn-sm" onclick="setRolModal({$vo.id});">设置权限</button>
					</td>
				</tr>
			{/volist}
			</tbody>
		</table>
	</div>
	<div class="panel-footer">
		{$data|raw}
	</div>
</div>

<!-- 添加角色 -->
<div class="modal fade" id="addRole">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" aria-hidden="true" onclick="closeRoleModal();">&times;</button>
				<h4 class="modal-title">添加角色</h4>
			</div>
			<div class="modal-body">
				<form action="" method="POST" class="form-horizontal" >
					<div class="form-group">
						<label class="col-sm-3 control-label">名称:</label>	
						<div class="col-sm-6">
							<input type="text" name="role_name" id="role_name" class="form-control ">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">备注:</label>	
						<div class="col-sm-6">
							<textarea name="remark"  class="form-control " id="remark" style="resize:none"></textarea> 
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="closeRoleModal();" >关闭</button>
				<button type="button" class="btn btn-primary" onclick="addRoleFunc();">保存</button>
			</div>
		</div>
	</div>
</div>
<!-- 你代码是怎么写的，不会还问你 -->
<!-- 纪律也不管， -->
<!-- 班级吵 -->
<!-- 说话带情绪，换助教-->

<!-- 修改 -->
<div class="modal fade" id="editRoleModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close"  aria-hidden="true" onclick="closeeditRoleModal();">&times;</button>
				<h4 class="modal-title">修改</h4>
			</div>
			<div class="modal-body">
				<form action="" method="POST" class="form-horizontal" >
							<input type="hidden"  id="id_e">

					<div class="form-group">
						<label class="col-sm-3 control-label">名称:</label>	
						<div class="col-sm-6">
							<input type="text" name="role_name" id="role_name_e" class="form-control ">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">备注:</label>	
						<div class="col-sm-6">
							<textarea name="remark"  class="form-control " id="remark_e" style="resize:none"></textarea> 
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">排序:</label>	
						<div class="col-sm-6">
							<input type="text" name="sort" id="sort_e" class="form-control ">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">状态:</label>	
						<div class="col-sm-6">
							<div class="radio">
								<label>
									<input type="radio" name="status_id" value="1" id="status_id_e1">正常
								</label>
								<label>
									<input type="radio" name="status_id" value="2" id="
									status_id_e2">禁用
								</label>
							</div>
						</div>
					</div>
				</form>
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="closeeditRoleModal();" >关闭</button>
				<button type="button" class="btn btn-primary" onclick="editRoleFunc();">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 分配权限 -->
<div class="modal fade" id="setModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" onclick="closeSetRolModal();" aria-hidden="true">&times;</button>
				<h4 class="modal-title">分配权限</h4>
			</div>
			<div class="modal-body">
					<div class="form-horizontal">
					<input type="hidden" id="role_id">
					<input type="hidden" id="ids">
						<div class="form-group">
							<label class="col-sm-3 control-label">权限列表：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="rights_name" readonly="" onclick="rightsAll();">
							</div>
							<div class="col-sm-3"></div>
							<div class="col-sm-8">
								<div class="treebox" style="display:none;background: rgb(250, 250, 250);
    border: 1px solid rgb(238, 238, 238);margin-top:1px;">
									<ul id="roleTree"  class="ztree"></ul>
								</div>
							</div>
						</div>
					</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="closeSetRolModal();">关闭</button>
				<button type="button" class="btn btn-primary" onclick="saveSetRight();">保存</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	function addRoleModal(){
		$('#addRole').modal('show');
	}
	function closeRoleModal(){
		$.trim($("#remark").val(''));
		$.trim($("#role_name").val(''));
		$('#addRole').modal('hide');
	}
	function addRoleFunc(){
		// alert(1)
		var remark=$.trim($("#remark").val());
		var role_name=$.trim($("#role_name").val());
		if(role_name){
			$.post('{:url("admin/role/add")}',{remark,role_name}, function(data) {
				/*optional stuff to do after success */
				// console.log(data)
				if(data.code==200){
					alert('添加成功');
				}else{
					alert('添加失败');
				}
					closeRoleModal();
			});
		}else{
			alert('名称必填')
		}
	}


	// 修改
	function editRoleModel(row){
		// console.log(row)
		$("#id_e").val(row.id);
		$("#role_name_e").val(row.role_name);
		$("#remark_e").val(row.remark);
		$("#sort_e").val(row.sort);
		$("input[name=status_id]").attr('checked',false);;
		$("#status_id_e"+row.status_id).attr('checked',true);
		$('#editRoleModal').modal('show');
	}
	// editRoleModal
	function closeeditRoleModal(){
		$('#editRoleModal').modal('hide');
	}
	// 修改提交
	function editRoleFunc(){
		var id=$.trim($("#id_e").val());
		var role_name=$.trim($("#role_name_e").val());
		var remark=$.trim($("#remark_e").val());
		var sort=$.trim($("#sort_e").val());
		var status_id=$.trim($("#editRoleModal input[type=radio]:checked").val());
        var str="{:url('admin/role/update',['id'=>'id'])}";
        var url =  str.replace("id",id);
		if(role_name){
			$.post(url,{role_name,status_id,remark,role_name}, function(data) {
				/*optional stuff to do after success */
				// console.log(data)
				if(data.code==200){
					alert('添加成功');
				}else{
					alert('添加失败');
				}
					closeeditRoleModal();
			});
		}else{
			alert('名称必填')
		}
	}
		// $.trim($("#role_name_e").val(row.role_name));
		// $.trim($("#remark_e").val(row.remark));
		// $.trim($("#sort_e").val(row.sort));
		// $.trim($("#status_id_e1").val(row.role_name));
	// 删除
	function delRol(id){
		var flag=confirm('是否删除？');
		if(flag){
			var str="{:url('admin/role/delete',['id'=>'id'])}";
	        var url =  str.replace("id",id);
			$.post(url,{}, function(data) {
				if(data.code==200){
					alert('删除成功');
				}else{
					alert('删除失败');
				}
			});
		}
	}
	// 开启设置权限弹窗
	function setRolModal(id){
		// alert(id)
		$("#role_id").val(id);
		$("#setModal").modal();
	}

	var setting = {
	    view: {
	        selectedMulti: true,
	        autoCancelSelected: true,
	    },
	    check: {
	        enable: true
	    },
	    callback: {
	    	onCheck:zTreeOnCheck,
	        onClick: zTreeOnClick,
	    },
	    data: {
	        simpleData: {
	            enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
	        }
	    },
	    edit: {
	        enable: true,
	        showRenameBtn: false,
	        showRemoveBtn: false
	    }
	};

	// 设置勾选状态
	function zTreeOnClick(event, treeId, treeNode) {
		// rights_name
	    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
	    // console.log(treeNode)
	    // 根据当前的勾选状态，影响子节点勾选状态
	    if(treeNode.checked){
	        treeNode.checked=false;
	        // 进行父子节点的勾选联动操作
	        treeObj.updateNode(treeNode,true);
	    }else{
	        treeNode.checked=true;
	        treeObj.updateNode(treeNode,true);
	    }
	    // console.log(treeNode)
		//  获取输入框被勾选 或 未勾选的节点集合
	    var obj=treeObj.getCheckedNodes(true);
			digun(obj);
	}
	function digun(nodes){
		var ids = '', names = ''
		for (var i = 0; i < nodes.length; i++) {
			ids += ',' + nodes[i].id
			names += ',' + nodes[i].name
		}
		if (ids.length > 0) {
			ids = ids.substr(1), names = names.substr(1);
		}
		$("#ids").val(ids)
		$("#rights_name").val(names)

	}
	// 对复选框点击的操作，设置勾选状态
	function zTreeOnCheck(event, treeId, treeNode){
	    var treeObj = $.fn.zTree.getZTreeObj(treeId);
	    treeObj.updateNode(treeNode,true);
		//  获取输入框被勾选 或 未勾选的节点集合
	    var obj=treeObj.getCheckedNodes(true);
			digun(obj);
	}
	// 获取当前用户权限
	function rightsAll(){
		var id=$("#role_id").val();
		var flag=false;
        var str="{:url('admin/role/rights',['role_id'=>'id'])}";
        var url =  str.replace("id",id);
        flag=true;
        if(flag){
			$.post(url,{},function(data) {
				// console.log(data);
				// return;
				if(data.code==200){
					$.fn.zTree.init($("#roleTree"), setting, data.data.all);
					var treeObj = $.fn.zTree.getZTreeObj("roleTree");
					// var nodes = treeObj.getSelectedNodes();
					digun(data.data.select);
					for (var i = 0; i < data.data.select.length; i++) {
						treeObj.checkNode(treeObj.getNodeByParam('id',data.data.select[i].id),true)
					};
					$('.treebox').show();
				}else{
					alert('服务器错误')
				}

			});
        }

	}
	// 关闭设置权限弹窗
	function closeSetRolModal(){
		$("#role_id").val('');
		$('#setModal').modal('hide');
	}
	function saveSetRight(){
		var flag=false;
		var id=$("#role_id").val();
		var ids=$("#ids").val();
		if(!ids) {alert('必须有权限');return};
        var str="{:url('admin/role/set',['role_id'=>'id'])}";
        var url =  str.replace("id",id);
		flag=true;
		if(flag){
			$.post(url,{ids}, function(data) {
				// console.log(data)
				if(data.code==200){
					alert(data.msg)
				}else{
					alert('分配失败')
				}
				 closeSetRolModal();
			});
		}

	}
</script>	
	
